<template>
  <div>
    <div ref="box" class="box">
      <span>123</span>
      <h3>456</h3>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    document.addEventListener('click', (e) => {
      // box的dom是否包含e.target
      // includes  contains
      // 包含：打印包含
      // 不包含：打包不包含
      if (this.$refs.box.contains(e.target)) {
        console.log('包含在内部')
      } else {
        console.log('不包含在外部')
      }
      // console.log(e.target)
    })
  }
}
</script>
<style lang="scss" scoped>
.box{
  width: 300px;
  height: 300px;
  background-color: #f00;
}
</style>
